<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formData.name" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="编号">
      <el-input v-model="formData.id" placeholder="请输入编号" />
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="formData.phone" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData">
    <el-table-column fixed prop="id" label="编号" />
    <el-table-column fixed prop="name" label="姓名" />
    <el-table-column fixed prop="phone" label="手机号" />

    <el-table-column fixed="right" label="账号状态">
      <template #default="scope">
        <el-switch
          v-model="scope.row.flag"
          class="mb-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="正常"
          inactive-text="冻结"
          @change="handleStatusChange(scope.row)"
        />
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页工具条 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="pageData.currentPage"
      v-model:page-size="pageData.pageSize"
      :page-sizes="[5, 10, 30, 50]"
      :small="false"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { userApi } from "@/api/index";
import { ro } from "element-plus/es/locale";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
//路由
const route = useRoute(); //用于获取当前页面的参数
const router = useRouter(); //用于页面的跳转

//表格数据
const tableData = ref([]);

//条件查询
const formData = reactive({
  id: "",
  name: "",
  phone: "",
});




//分页数据
const pageData = reactive({
  currentPage: "1",
  pageSize: "5",
  total: 10,
});

//钩子函数
onMounted(() => {
  getUserList();
});

//处理页数大小改变
const handleSizeChange = (pageSize: any) => {
  pageData.pageSize = pageSize;
  getUserList();
};

//处理当前页改变
const handleCurrentChange = (currentPage: any) => {
  pageData.currentPage = currentPage;
  getUserList();
};

//查询所有用户数据
const getUserList = () => {

  userApi.select
    .call({
      id: formData.id,
      name: formData.name,
      phone: formData.phone,
      currentPage: pageData.currentPage,
      pageSize: pageData.pageSize,
    })
    .then((res: any) => {
      res.records.forEach((item) => {
        if (item.isDeleted === 0) {
          item.flag = true;
        } else {
          item.flag = false;
        }
      });
      tableData.value = res.records;
      pageData.total = res.total;
    });
};

//提交查询表单数据
const onSubmit = () => {
  getUserList();
};

const handleStatusChange = (row: any) => {
  let isDeleted = row.isDeleted;
  if (row.flag === true) {
    isDeleted = 0;
  } else {
    isDeleted = 1;
  }
  userApi.update.call({id:row.id,isDeleted:isDeleted}).then((res:any)=>{
    
  })
};
</script>
